I'm looking for the simplest way of creating 'buttons' with bootom-central triangles as follows:

  |--------|
  |  Text  |
  |---\/---|

By buttons/menu items I mean something which will will support atomic mouse behavior for the whole shape's region.

No rounded corners just the shape itself. I saw plenty of websites doing thsese buttons lately, but now for some strange reason I couldn't find any. Ideally I'm looking for tutorial links or some general guidances, as the topic might be too big to be covered by one post.

Technology scope wise - ideally I'm looking for Html5/Css3 solution. I don't care mouch about old IE support and I think Html5/css3 will give a slicker/more elegant solution. On the way forward I might need to add drop shadows, which is another argument in favour of css3.

Thanks.